<template>
  <div class="home">
    <h1>Electron + Vite + Vue 应用</h1>
    <div class="card">
      <p>欢迎使用这个桌面应用程序！</p>
      <p>这是一个使用 Electron、Vite 和 Vue 构建的基础工程。</p>
      <div class="versions">
        <p>当前使用的版本:</p>
        <ul>
          <li>Electron: <span id="electron-version"></span></li>
          <li>Chrome: <span id="chrome-version"></span></li>
          <li>Node.js: <span id="node-version"></span></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
// 组件逻辑可以在这里编写
</script>

<style scoped>
.home {
  text-align: center;
}

h1 {
  color: #34495e;
  margin-bottom: 2rem;
}

.card {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 0 auto;
}

.versions {
  margin-top: 2rem;
  text-align: left;
  background-color: #e9ecef;
  padding: 1rem;
  border-radius: 4px;
}

.versions ul {
  list-style-type: none;
  padding-left: 1rem;
}

.versions li {
  margin: 0.5rem 0;
  font-family: monospace;
}
</style>